{% extends 'base.html' %}

{% block content %}
<h1 class="dash-title">台站信息</h1>
<div class="row">
    <div class="col-lg-9">
        <div class="card spur-card">
            <div class="card-header">
                <div class="spur-card-icon">
                    <i class="fas fa-table"></i>
                </div>
                <div class="spur-card-title">
                    台站列表
                </div>
            </div>
            <div class="card-body">
                <table class="table table-hover table-in-card">
                    <thead>
                        <tr>
                            <th scope="col"><input type="checkbox" name="" id=""></th>
                            <th scope="col">台网代码</th>
                            <th scope="col">台站代码</th>
                            <th scope="col">台站名</th>
                            <th scope="col">纬度</th>
                            <th scope="col">经度</th>
                            <th scope="col">高程</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% if station_list %}
                        {% for station in station_list %}
                        <tr>
                            <th scope="row"><input type="checkbox" name="" id=""></th>
                            <td>{{ station.net.code }}</td>
                            <td>{{ station.code }}</td>
                            <td>{{ station.name }}</td>
                            <td>{{ station.latitude }}</td>
                            <td>{{ station.longitude }}</td>
                            <td>{{ station.altitude }}</td>
                            <td>
                                <a href="{% url 'basic:station_detail' station.slug %}">详情</a> |
                                <a href="{% url 'basic:station_edit' station.slug %}">修改</a>
                                <a href="{% url 'basic:station_delete' station.slug %}">删除</a>
                            </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="8" class="table-warning text-center">没有台站</td>
                        </tr>
                        {% endif %}

                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="text-muted">
                    共计:
                    {% if is_paginated %}
                    {{ paginator.count }}
                    {% else %}
                    {{ station_list | length }}
                    {% endif %}
                </div>
                {% if is_paginated %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" data-url='{"page":{{page_obj.previous_page_number}}}' is-page href="#"
                                aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}

                        {% for i in paginator.page_range %}
                        {% if page_obj.number == i %}
                        <li class="page-item active" aria-current="page">
                            <a class="page-link" href="#">{{ i }}<span class="sr-only">(current)</span></a>
                        </li>
                        {% else %}
                        <li class="page-item"><a class="page-link" data-url='{"page":"{{i}}"}' is-page
                                href=" #">{{ i }}</a>
                        </li>
                        {% endif %}
                        {% endfor %}
                        {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" data-url='{"page":{{ page_obj.next_page_number }}}' is-page href="#"
                                aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {%endif%}
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card spur-card">
            <div class="card-header">
                <div class="spur-card-icon">
                    <i class="fas fa-table"></i>
                </div>
                <div class="spur-card-title">
                    过滤操作
                </div>
            </div>
            <div class="card-body">
                <ul>
                    <li>
                        台网过滤
                        <ul>
                            <li><a href="{% url 'basic:station_list' %}">全部</a></li>
                            {% for net in network_list %}
                            <li><a data-url='{"net__id__exact":{{ net.id }}}' href="#">{{ net.code}}
                                </a></li>
                            {% endfor %}
                        </ul>
                    </li>
                    <li>
                        状态过滤
                        <ul>
                            <li><a href="{% url 'basic:station_list' %}">全部</a></li>
                            {% for k,v in status_type %}
                            <li><a data-url='{"status__exact":"{{ k }}"}' href="#">{{ v }}</a></li>
                            {% endfor %}
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <a class="btn btn-primary" href="{% url 'basic:station_add' %}">添加台站</a>
        <button type="submit" class="btn btn-danger">批量删除</button>
    </div>
</div>
{% endblock %}


{% block javascript %}
<script>
    const getParams = (oldUri) => {
        const paramsStr = window.location.search;
        let params = {};
        if (oldUri.indexOf("?") != -1) {
            paramStr = paramsStr.substr(1);
            paramStrs = paramStr.split("&");
            for (let i = 0; i < paramStrs.length; i++) {
                params[paramStrs[i].split("=")[0]] = unescape(paramStrs[i].split("=")[1]);
            }
        }
        //console.log(params);
        return params;
    };
    const parseParams = (oldUri, params, isPage) => {
        const serverName = (oldUri.search(/\?/) !== -1) ? oldUri.split("?")[0] : oldUri
        const oldParams = getParams(oldUri);
        let newParams = Object.assign(oldParams, params);

        if (!isPage) {
            delete newParams.page
        }
        console.log(newParams);

        const paramsArray = []
        Object.keys(newParams).forEach(key => newParams[key] && paramsArray.push(`${key}=${newParams[key]}`))

        let uri = serverName + `?${paramsArray.join('&')}`

        console.log(paramsArray);
        return uri
    };
    //let params = {
    //    keyword: 't',
    //    page: 1,
    //    size: 2
    //}
    //let uri = 'http://api.xxxxx.xx/problems/search'

    $(document).ready(function () {
        $("[data-url]").each(function () {
            //console.log($(this).attr("data-url"));
            const params = JSON.parse($(this).attr("data-url"));
            const isPageAttr = $(this).attr("is-page")
            const isPage = (typeof isPageAttr !== typeof undefined && isPageAttr !== false);
            const uri = window.location.href;
            let newUri = parseParams(uri, params, isPage);
            console.log(isPageAttr);
            console.log(typeof isPageAttr);
            console.log(isPage);
            //console.log(location.search);
            //console.log(typeof params);
            //console.log(params);
            ////console.log(JSON.parse(params));
            //console.log(newUri);
            $(this).attr("href", newUri);
        });
    });
</script>


{% endblock javascript %}